<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-12-12 09:41:21
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-06-19 18:26:32
 * @FilePath: \mould\src\views\test\codeGenerator.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="codeGenerator" id="department">
        <div class="codeGeneratorBox">
            <div class="lr-cover-img">
                <img class="lr-cover-img1" src="assets/img/singletable0.png">
                <img class="lr-cover-img2" src="assets/img/singletable1.png">

                <h4>快速开发模板</h4>

            </div>
            <div class="lr-cover-info">快速生成必要的类和页面。</div>
            <div class="lr-cover-button">
                <div class="btn" @click="yj_viewForm">配置</div>
            </div>
        </div>
        <div class="Control-1 mechanism_dialogS">
            <el-dialog title="查看" :modal-append-to-body="false" v-dialogDrag :visible.sync="dialogEditVisible"
                v-loading="loadingEditDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)">
                <div class="dialogBody common" :style="{ height: '550px' }">
                    <el-steps :active="active" finish-status="success" simple>
                        <el-step title="选择数据表">
                        </el-step>
                        <el-step title="查看代码"></el-step>
                    </el-steps>
                    <div class="dataBoxActive">
                        <div v-show="active == 0" style="height:100%">


                            <tableData :config="table_config" :dataList="tableData" :loading="listLoading"
                                @click-change="rowChange" />
                        </div>
                        <div v-show="active == 1" style="height:100%" class="bansetting">
                            <publicForm ref="publicForm" lableWidth="60px" :formObj="formObj" :formData="formData">
                            </publicForm>
                        </div>
                        <div v-show="active == 2">
                            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                                <el-tab-pane label="主页面配置" name="first">
                                    <prism-editor class="my-editor height-300" v-model="htmlcode" :highlight="highlighter"
                                        readonly line-numbers></prism-editor>
                                </el-tab-pane>
                                <el-tab-pane label="接口文件配置" name="second">
                                    <prism-editor class="my-editor height-300" v-model="portcode" :highlight="highlighter"
                                        readonly line-numbers></prism-editor>
                                </el-tab-pane>
                                <el-tab-pane label="publicForm模板" name="third">
                                    <prism-editor class="my-editor height-300" v-model="publicFormcode"
                                        :highlight="highlighter" readonly line-numbers></prism-editor>
                                </el-tab-pane>
                                <el-tab-pane label="table模板" name="fourth">
                                    <prism-editor class="my-editor height-300" v-model="tablecode" :highlight="highlighter"
                                        readonly line-numbers></prism-editor>
                                </el-tab-pane>
                            </el-tabs>
                        </div>

                        <div class="newlyAdded_btn">
                            <el-button type="warning" @click="prev(actives)" :disabled="prevStr">上一步</el-button>
                            <el-button type="warning" @click="next(actives)" :disabled="nextStr">下一步</el-button>
                            <!-- <el-button type="primary" @click="submitForm('formData')" :disabled="saveStr">保存</el-button> -->
                            <!-- <el-button type="warning" @click="resetForm('formData')">重置</el-button> -->
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>

    </div>
</template>
<script>
import TableData from '@/components/public/el-table';//主页面列表
import publicForm from "@/components/public/el-form.vue"//弹框form
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css'

// import highlighting library
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism-tomorrow.css'
import {
    getSysTable
} from "@/api/request.js";
export default {
    data() {
        return {
            dialogHeight: '200px',
            loadingEditDialog: false,//弹框loading
            dialogEditVisible: false,//新增弹框是否显示
            listLoading: false,
            actives: 1,
            active: 0,
            prevStr: true,
            nextStr: false,


            table_config: {
                imgKeyWord: "url",
                fileKeyWord: "url",
                fileName: "fFileName",
                dialogHeight: '',
                thead: [
                    {
                        label: '表名',
                        prop: 'tableName',
                        minWidth: '150px',
                        align: "left"
                    },
                ],
                isCheckBox: false,
                isIndex: true,
                isOperation: true,
            },
            tableData: [], //表格列表数据列表
            formObj: [
                {
                    input: true, //是input
                    label: "创建人员", //字段
                    prop: "fMachinename", //字段名
                    width: 12, //参考el-col
                    disabled: true, //是否禁用

                }, {
                    input: true, //是input
                    label: "功能类名", //字段
                    prop: "fMachineid", //字段名
                    width: 12, //参考el-col
                    disabled: false, //是否禁用
                    rules: [{
                        required: true,
                        message: '功能类名不能为空'
                    }] //验证
                }, {
                    input: true, //是input
                    label: "功能描述", //字段
                    prop: "fNote", //字段名
                    width: 12, //参考el-col
                    disabled: false, //是否禁用
                    rules: [{
                        required: true,
                        message: '功能类名不能为空'
                    }] //验证
                },
                {
                    select: true,
                    label: "输出区域",
                    prop: "fStationname",
                    placeholder: "请选择",
                    width: 12, //参考el-col
                    disabled: false,
                    options: [
                        {
                            label: 'YJ_CodeDemo',
                            value: 'YJ_CodeDemo'
                        }, {
                            label: 'YJ_SystemModule',
                            value: 'YJ_SystemModule'
                        }, {
                            label: 'YJ_WorkTerm',
                            value: 'YJ_WorkTerm'
                        }, {
                            label: 'YJ_WorkDuty',
                            value: 'YJ_WorkDuty'
                        }, {
                            label: 'YJ_WorkManage',
                            value: 'YJ_WorkManage'
                        }, {
                            label: 'YJ_WorkRisk',
                            value: 'YJ_WorkRisk'
                        }, {
                            label: 'YJ_WorkCheck',
                            value: 'YJ_WorkCheck'
                        }, {
                            label: 'YJ_WorkPlan',
                            value: 'YJ_WorkPlan'
                        }, {
                            label: 'YJ_WorkOther',
                            value: 'YJ_WorkOther'
                        }, {
                            label: 'YJ_Environmental',
                            value: 'YJ_Environmental'
                        }
                    ],
                    rules: [{
                        required: true,
                        message: '请选择输出区域'
                    }] //验证

                },


            ],
            formData: {},//新增编辑向后台传递对象
            tableName: null,

            activeName: 'first',
            htmlcode: "",//html
            portcode: "",//接口配置
            publicFormcode: "",
            tablecode: ''

        }
    },
    components: {
        TableData,
        publicForm,
        PrismEditor
    },
    mounted() {
        var userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.formData.fMachinename = userInfo.realName
    },
    methods: {
        yj_viewForm() {

            this.dialogEditVisible = true;
            this.loadingEditDialog = false;
            getSysTable({})
                .then((res) => {
                    if (res.errcode == 0) {
                        var that = this;
                        that.listLoading = false;
                        that.tableData = res.data.sysTableList
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                })
                .catch((error) => {
                    this.$message.error(error.msg);
                });
        },

        next() {
            if (this.active == 0) {
                if (this.tableName != null) {
                    this.active++
                    this.prevStr = false
                    this.nextStr = false
                } else {
                    return this.$message.error("请选择表名");
                }

            }
            else if (this.active == 1) {


                if (this.$refs.publicForm.submitForm()) {
                    this.active++
                    this.prevStr = false
                    this.nextStr = true
                    console.log(this.formData);
                    this.htmlcode = `<!--
 * @Date: ${document.fileCreatedDate}
 * @LastEditTime: ${document.lastModified}
 * @Description: ${this.formData.fNote}
-->
<template>
    <div class="department" id="department">
        <!-- 左侧部门管理 -->
        <div class="structureTree" v-if="treelength">
            <div class="structureTree_title">
                <div>组织机构</div>
                <div></div>
            </div>
            <tree :treeData="treeData" nodeKey="fCompanyid" @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
            </tree>
        </div>
        <!-- 右侧 -->
        <div class="department_right">
            <!-- 机构名称 -->
            <el-breadcrumb :title="showName"></el-breadcrumb>
            <!-- 顶部导航栏 -->
            <div class="mechanism_nav ">
                <!-- 左侧 -->
                <div class="mechanism_nav_left ">
                </div>
                <!-- 顶部按钮 -->
                <div class="print" style="justify-content: flex-end">
                    <el-button type="primary" icon="el-icon-refresh" size="small" @click="yj_searchForm(getList)">
                    </el-button>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="yj_editForm(2)">查看
                    </el-button>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="yj_editForm(0)">
                        新增</el-button>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="yj_editForm(1)">编辑
                    </el-button>
                    <el-button type="primary" icon="el-icon-delete" size="small"
                        @click="yj_delForm(id)">删除
                    </el-button>
                    <el-button type="primary" icon="el-icon-delete" size="small"
                        @click="yj_submit(id)">提交
                    </el-button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="text_table">
                <tableData :config="table_config" :rowKey="rowKey" :dataList="tableData" :loading="listLoading"
                    @selection-change="selectionChange" @sort-change="sortChange" @click-change="rowChange"
                    @openDialog="openDialog" />
            </div>
            <!--弹框 查看 -->
            <div class="Control-1 bansetting">
                <el-dialog :title="editDialog" :modal-append-to-body="false" v-dialogDrag
                    :visible.sync="dialogEditVisible" v-loading="loadingEditDialog" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="dialogBody common" :style="{ height: '550px' }">
                        <div class="baseTitle">基本信息</div>
                        <div style="height:140px">
                            <publicForm ref="publicForm" lableWidth="60px" @changeRadio="changeRadio" :formObj="formObj"
                                :formData="formData" @selectChange="selectChange">
                            </publicForm>
                        </div>
                        <div class="baseTitle" v-if="(formData.fType == 1)">仪器详情</div>
                        <div style="height:75px;margin-top: 8px;" class="editTableAlarm editTableAlarms"
                            v-if="(formData.fType == 1)">
                            <tableData :config="material_config" :dataList="materialData" :currentRow="false"
                                @inputValue="inputValue" />
                        </div>
                    </div>
                    <div class="newlyAdded_btn" v-if="submitFlag">
                        <el-button type="primary" @click="yj_saveForm('formData')">保存</el-button>
                        <el-button type="warning" @click="dialogEditVisible = false">关闭</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import tree from '@/components/public/el-tree';
import TableData from '@/components/public/el-table';
import elBreadcrumb from "@/components/public/el-breadcrumb.vue"
import publicForm from "@/components/public/el-form.vue"
import {
    getUserCompanyTreeList,//树状图接口
    getStationmachineList,//获取单位数据列表
    ${this.formData.fMachineid}getPageList,//列表
    ${this.formData.fMachineid}SaveForm,//保存
    ${this.formData.fMachineid}Form,//编辑详情
} from "@/api/request.js";
import { type } from '@/utils/config';
export default {
    name: "Home",
    data() {
        return {
            name: "mixingPlant",//按钮配置页面代号
            yj_add: null,//新增按钮是否显示
            yj_edit: null,//编辑按钮是否显示
            yj_view: null,//查看按钮是否显示
            submitFlag: null,//是否显示保存按钮
            formObj: [{//新增编辑配置参数
                radio: true,
                label: "类型",
                prop: "fType",
                placeholder: "请选择",
                width: 12, //参考el-col
                disabled: false,
                options: [{
                    label: "单位机",
                    value: "1"
                }, {
                    label: "单位站",
                    value: "0"
                },],
            },
            {
                select: true,
                label: "单位站",
                prop: "fStationname",
                placeholder: "请选择",
                width: 12, //参考el-col
                disabled: false,
                options: [],
                rules: [{
                    required: true,
                    message: '请选择单位站'
                }] //验证

            },
            {
                input: true, //是input
                label: "编号", //字段
                prop: "fMachineid", //字段名
                width: 12, //参考el-col
                disabled: false, //是否禁用
                rules: [{
                    required: true,
                    message: '编号不能为空'
                }] //验证
            },

            {
                input: true, //是input
                label: "名称", //字段
                prop: "fMachinename", //字段名
                width: 12, //参考el-col
                disabled: false, //是否禁用
                rules: [{
                    required: true,
                    message: '编号不能为空'
                }] //验证
            },

            {
                textarea: true, //是input
                label: "备注", //字段
                prop: "fNote", //字段名
                width: 24, //参考el-col
                disabled: false, //是否禁用

            },
            ],
            formData: {},//新增编辑向后台传递对象
            editDialog: null,//dialog的title新增、编辑、查看
            glInfo: null,//仪器详情对象，页面编辑发生改变
            rowKey: 'fId',//单位站树状列表rowKey
            // 单位站列表配置项
            table_config: {
                imgKeyWord: "url",
                fileKeyWord: "url",
                fileName: "fFileName",

                dialogHeight: '',
                thead: [
                    {
                        label: '施工单位',
                        prop: 'fCompanyname',
                        minWidth: '150px',
                        routerPath: 'xxx',
                        align: "left"
                    },
                    {
                        label: '编号',
                        prop: 'fMachineid',
                        minWidth: '100px',
                        routerPath: 'xxx',
                        align: "center"
                    },
                    {
                        label: '名称', prop: 'fMachinename', minWidth: '100px',
                        routerPath: 'xxx',
                        align: "center"
                    },

                    {
                        label: '类型',
                        prop: 'fType',
                        minWidth: '150px',
                        filter: true,
                        align: "center",
                        btn: true,
                        colorName: '',
                        callback: (rowData) => {

                            let data = type[rowData.fType]
                            if (data) {

                                return data.label
                            }
                        },
                        specialClass: (rowData) => {
                            let data = type[rowData.fType]
                            if (data) {
                                return data.className
                            }
                        }
                    },
                    {
                        label: '备注', prop: 'fNote', minWidth: '100px',
                        routerPath: 'xxx'
                    },

                ],
                isCheckBox: false,
                isIndex: true,
                isOperation: true,
                // 表格操作列
                // operation: {
                //     label: '操作',
                //     width: '100',
                //     detail: true,
                //     cols: [
                //         {
                //             label: '查看',
                //             type: 'primary',
                //             handleRow: this.handleRow
                //         },

                //     ]
                // },
            },
            // 仪器表格配置参数
            material_config: {
                thead: [
                    {
                        label: '原名',
                        prop: 'name',
                        minWidth: '70px',
                        disabled: false, //是否禁用
                        edit: false,
                        type: 'text',
                        align: "center"
                    },
                    {
                        label: '仪器1',
                        prop: 'fParm1',
                        minWidth: '70px',
                        disabled: false, //是否禁用
                        edit: true,
                        type: 'text',
                        align: "center"
                    },
                    {
                        label: '仪器2',
                        prop: 'fParm2',
                        minWidth: '70px',
                        disabled: false, //是否禁用
                        edit: true,
                        type: 'text',
                        align: "center"
                    },
                    {
                        type: 'text',
                        label: '仪器3', prop: 'fParm3', minWidth: '70px', disabled: false, edit: true,//是否禁用
                        align: "center"
                    },
                    {
                        type: 'text',
                        label: '仪器4', prop: 'fParm4', minWidth: '70px', disabled: false, edit: true,//是否禁用
                        align: "center"
                    },
                    {
                        type: 'text',
                        label: '仪器5', prop: 'fParm5', minWidth: '70px', disabled: false, edit: true,//是否禁用
                        align: "center"
                    },
                    {
                        type: 'text',
                        label: '仪器6', prop: 'fParm6', minWidth: '70px', disabled: false, edit: true, //是否禁用
                        align: "center"
                    }

                ],
            },//材料配置项
            materialData: [{
                name: '现名',
                fParm1: "仪器1",//仪器1
                fParm2: "仪器2",//仪器2
                fParm3: "仪器3",//仪器3
                fParm4: "仪器4",//仪器4
                fParm5: "仪器5",//仪器5
                fParm6: "仪器6"//仪器6
            }],//材料用量列表

            highlightBd: true, //左侧机构树停留背景色
            treelength: false, //左侧树显示隐藏
            checked: true, //查看下级
            showName: "未选择公司",
            dialogHeight: "330px",//新增编辑弹框高度
            fId: null, //点击当前列表数据fId
            listLoading: false,//列表数据加载loading
            loadingEditDialog: false,//弹框loading
            dialogEditVisible: false,//新增弹框是否显示
            // 列表给后端传参
            getList: {
                companyId: "",// 施工标段id
                modelType: ""// 类型
            },

            companyTree: "", //所有数据
            treeData: [], //左侧树状图数据
            tableData: [], //表格列表数据列表
            // 左侧机构树
            defaultProps: {
                children: "children",
                label: "fShortname",
            },
            userInfo: {}, //登录用户
            treeText: {//树状图参数
                companyId: null,
                userId: null,
            },
        };
    },
    components: {
        tree,//左侧组织机构数
        TableData,//主页面列表
        elBreadcrumb,//面包屑
        publicForm,//弹框表格
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.getTree();
        this.btnRole(this.name);
    },
    methods: {
        btnRole(name) {// 按钮权限
            var btnList = [];
            var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
            if (ModuleList.length > 0) {
                ModuleList.map((item) => {
                    if (item.fEncode == name) {
                        btnList = item.modulebuttonList;
                    }
                });
                var btnStr = [];
                btnList.map((item) => {

                    btnStr.push(item.fEncode);
                });
                this.lr_look = btnStr.includes("lr_look");
            } else {
                this.lr_look = true;
            }
        },
        // 点击列表当前行，获取当前信息
        rowChange(row) {
            this.fId = row.fId;
        },
        // 左侧树结构
        getTree() {
            this.treeText.companyId = this.userInfo.companyId;
            this.treeText.userId = this.userInfo.userId;
            getUserCompanyTreeList(this.treeText)
                .then((res) => {
                    if (res.errcode == 0) {
                        var companyTree = res.data.userCompanyTreeList;
                        this.treeData = this.tranListToTreeData(companyTree);//将接口返回数据二次处理，形成树状图结构
                        if (this.treeData[0].children == undefined) {
                            this.treelength = false;//左侧组织机构是否显示
                        }
                        else {
                            this.treelength = true;
                        }
                        this.showName = this.treeData[0].fShortname;//当前点击组织机构名称
                        this.getList.companyId = this.treeData[0].fCompanyid;//当前点击组织机构ID
                        this.yj_searchForm(this.getList);// 调用主页面列表接口
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                })
                .catch(() => {
                    return false;
                });
        },
        tranListToTreeData(data) {//处理树状图数据
            let result = [];
            if (!Array.isArray(data)) {
                return result;
            }
            // 清除已存在的数据  重新赋值
            data.forEach((item) => {
                delete item.children;
            });
            let map = {};
            data.forEach((item) => {
                map[item.fCompanyid] = item;
            });
            data.forEach((item) => {
                let parent = map[item.fParentid];
                if (parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    result.push(item);
                }
            });
            return result;
        },
        // 点击左侧机构树
        handleNodeClick(data) {
            this.showName = data.fShortname; //顶部显示机构名
            this.getList.companyId = data.fCompanyid;
            this.yj_searchForm(this.getList);
        },
        tranListToTreeDatas(data) {//处理主页面列表树结构
            let result = [];
            if (!Array.isArray(data)) {
                return result;
            }
            // 清除已存在的数据  重新赋值
            data.forEach((item) => {
                delete item.children;
            });
            let map = {};
            data.forEach((item) => {
                map[item.fMachineid] = item;
            });
            data.forEach((item) => {
                let parent = map[item.fStationid];
                if (parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    result.push(item);
                }
            });
            return result;
        },
        // 获取列表数据
        yj_searchForm(data) {
            this.listLoading = true;
            ${this.formData.fMachineid}getPageList(data)
                .then((res) => {
                    if (res.errcode == 0) {
                        var that = this;
                        that.listLoading = false;
                        that.tableData = that.tranListToTreeDatas(res.data.stationmachineList)
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                })
                .catch((error) => {
                    this.$message.error(error.msg);
                });
        },
        // 新增、编辑
        yj_editForm(status) {//0新增，1编辑
            this.mixingPlantList()//点击新增编辑获取单位机数据
            if (status == 1) {
                this.submitFlag = true//显示保存按钮
                this.editDialog = "编辑功能";
                if (this.fId != null && this.fId != "") {
                    this.dialogEditVisible = true;
                    ${this.formData.fMachineid}Form({ fId: this.fId })
                        .then((res) => {
                            if (res.errcode == 0) {
                                // 判断页面input select 必填项是否禁用等
                                this.formObj.map(item => {
                                    item.disabled = false
                                    if (item.rules) {
                                        item.rules[0].required = true
                                    }
                                })
                                this.material_config.thead.map(item => {
                                    item.disabled = false //是否禁用
                                })
                                if (res.data.yjQmpMsStationmachine.fType == 0) {
                                    this.formObj[1].disabled = true
                                    this.formObj[1].rules[0].required = false
                                } else {
                                    this.formObj[1].disabled = false
                                    this.formObj[1].rules[0].required = true
                                }
                                // 判断页面input select 必填项是否禁用等
                                this.loadingEditDialog = false;
                                this.formData = res.data.yjQmpMsStationmachine;
                                this.materialData = [{
                                    name: '现名',
                                    fParm1: this.formData.fParm1,//仪器1
                                    fParm2: this.formData.fParm2,//仪器2
                                    fParm3: this.formData.fParm3,//仪器3
                                    fParm4: this.formData.fParm4,//仪器4
                                    fParm5: this.formData.fParm5,//仪器5
                                    fParm6: this.formData.fParm6//仪器6
                                }]

                            } else {
                                this.$message.error(res.msg);
                                console.log("接口报错");
                            }
                        })
                        .catch((error) => {
                            console.log("单位设置编辑报错", error);
                        });
                } else {
                    return this.$message.error("请选择需要编辑的数据");
                }
            } else if (status == 0) {
                this.submitFlag = true//显示保存按钮
                if (this.getList.companyId != "" && this.getList.companyId != null) {
                    this.editDialog = "新增";
                    this.dialogEditVisible = true;
                    this.loadingEditDialog = false;
                    // 判断页面input select 必填项是否禁用等
                    this.formObj.map(item => {
                        item.disabled = false
                        if (item.rules) {
                            item.rules[0].required = true
                        }
                    })
                    this.material_config.thead.map(item => {
                        item.disabled = false //是否禁用
                    })
                    // 判断页面input select 必填项是否禁用等
                    this.formData = {
                        fId: null,// 主键id
                        fCompanyid: this.getList.companyId,// 施工单位id
                        fCompanyname: this.showName,//施工单位
                        fMachineid: "",// 编号
                        fMachinename: "",// 名称
                        fStationid: "",// 单位id
                        fStationname: "",// 单位名称
                        fType: "1",// 类型  0单位 1单位机
                        fNote: "",//备注
                        fParm1: "仪器1",//仪器1
                        fParm2: "仪器2",//仪器2
                        fParm3: "仪器3",//仪器3
                        fParm4: "仪器4",//仪器4
                        fParm5: "仪器5",//仪器5
                        fParm6: "仪器6"//仪器6


                    }
                } else {
                    return this.$message.error("请先选择施工单位");
                }

            } else if (status == 2) {
                this.editDialog = "查看功能";
                this.submitFlag = false//不显示提交按钮

                if (this.fId != null && this.fId != "") {
                    this.dialogEditVisible = true;

                    ${this.formData.fMachineid}Form({ fId: this.fId })
                        .then((res) => {
                            if (res.errcode == 0) {
                                // 判断页面input select 必填项是否禁用等
                                this.formObj.map(item => {
                                    item.disabled = true
                                    if (item.rules) {
                                        item.rules[0].required = false
                                    }
                                })
                                this.material_config.thead.map(item => {
                                    console.log(item.disabled);
                                    item.disabled = true //是否禁用
                                })
                                // 判断页面input select 必填项是否禁用等
                                this.loadingEditDialog = false;
                                this.formData = res.data.yjQmpMsStationmachine;
                                this.materialData = [{
                                    name: '现名',
                                    fParm1: this.formData.fParm1,//仪器1
                                    fParm2: this.formData.fParm2,//仪器2
                                    fParm3: this.formData.fParm3,//仪器3
                                    fParm4: this.formData.fParm4,//仪器4
                                    fParm5: this.formData.fParm5,//仪器5
                                    fParm6: this.formData.fParm6//仪器6
                                }]

                            } else {
                                this.$message.error(res.msg);
                                console.log("接口报错");
                            }
                        })
                        .catch((error) => {
                            console.log("单位设置编辑报错", error);
                        });
                } else {
                    return this.$message.error("请选择需要查看的数据");
                }
            }
        },
        // 保存接口
        yj_saveForm() {
            if (this.$refs.publicForm.submitForm()) {
                var newObj = {};
                // delete this.glInfo.name
                Object.assign(newObj, this.formData, this.glInfo);
                console.log(newObj);
                ${this.formData.fMachineid}SaveForm(newObj)
                    .then((res) => {
                        if (res.errcode == 0) {
                            console.log(res);
                            this.yj_searchForm(this.getList);
                            this.dialogEditVisible = false
                            this.$message.success("新增成功");
                        } else {
                            this.$message.error(res.msg);
                            console.log("接口报错");
                        }
                    })
                    .catch((error) => {
                        console.log("单位设置-新增）", error);
                    });
            } else {
                console.log("error")
            }
        },
        yj_delForm(id) {
            if (id != "" && id != null) {
                this.listLoading = true;
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        ${this.formData.fMachineid}DeleteForm({ fId: id }).then((res) => {
                            if (res.errcode == 0) {
                                this.listLoading = false;
                                this.yj_searchForm(this.getList);
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error(res.msg);
                                return false;
                            }
                        });
                    })
                    .catch(() => {
                        this.listLoading = false;
                        this.$message("取消删除");
                    });
            } else {
                return this.$message.error("请先选择需要删除的数据");
            }
        },
        // 提交
        yj_submit(id) {
            if (id != "" && id != null) {
                this.listLoading = true;
                this.$confirm("是否继续提交?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        submitPierProject({ fId: id, }).then((res) => {
                            if (res.errcode == 0) {
                                this.listLoading = false;
                                this.yj_searchForm(this.getList);
                                this.$message.success("提交成功");
                            } else {
                                this.$message.error(res.msg);
                                return false;
                            }
                        });
                    })
                    .catch(() => {
                        this.listLoading = false;
                      this.$message("取消提交");
                    });
            } else {
                return this.$message.error("请先选择需要提交的数据");
            }
        },
        // 获取单位数据
        mixingPlantList() {
            var data = {
                companyId: this.getList.companyId,// 施工标段id
                modelType: "0"// 类型
                stationType :"3"// 拌合站类型

            }
            getStationmachineList(data)
                .then((res) => {
                    if (res.errcode == 0) {
                        var arr = res.data.stationmachineList
                        this.formObj[1].options = []
                        arr.map(item => {
                            this.formObj[1].options.push({
                                label: item.fMachinename,
                                value: item.fMachineid
                            })
                        })
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                })
                .catch((error) => {
                    this.$message.error(error.msg);
                });
        },
        // 关闭新增编辑弹框
        resetForm() {
            this.dialogEditVisible = false;
        },
        // 类型改变时触发
        changeRadio(num) {
            if (num == 0) {
                console.log(num);
                this.formObj[1].disabled = true
                this.formObj[1].rules[0].required = false
                this.formData.fStationid = ''// 单位id
                this.formData.fStationname = ''// 单位名称
            } else {
                this.formObj[1].disabled = false
                this.formObj[1].rules[0].required = true
            }
        },
        // 单位下拉框
        selectChange(value) {
            this.formData.fStationid = value.value// 单位id
            this.formData.fStationname = value.label// 单位名称
        },
        // 仪器详情
        inputValue(val) {
            this.glInfo = val
        },
        // 多选方法
        selectionChange() { },
        // 排序方法
        sortChange() { },
        // 点击设备编码
        openDialog(row) {
            console.log(row);
            this.fId = row.F_Id;
            this.editText(this.fId);
        },
    },
};
<//script>
<style scoped>
.printTables {
    background: #fff;
    display: flex;
    justify-content: end;
    padding: 5px;
    margin-top: 10px;

}

.dialogBody {
    padding: 3px 20px;
    height: 80%;
    overflow-y: auto;

}

.baseTitle {
    /* border: 1px solid #0c204d; */
    border-bottom: 1px solid #0c204d;

    height: 30px;
    line-height: 30px;
    position: relative;
    padding-left: 15px;

}

.baseTitle::after {
    display: block;
    content: "";
    height: 30px;
    width: 5px;
    position: absolute;
    left: 0;
    top: 0;
    background: #0c204d;
}
</style>
`
                    this.portcode = `// 路径：src/api/request.js
// 列表页接口  getPageList
export const ${this.formData.fMachineid}getPageList = (res) => {
    return reqNull("post", url + "${this.formData.fStationname.label}/${this.formData.fMachineid}/getPageList", res)
}
// 新增编辑详情接口  Form
export const ${this.formData.fMachineid}Form = (res) => {
    return reqNull("post", url + "${this.formData.fStationname.label}/${this.formData.fMachineid}/Form", res)
}
// 删除接口  DeleteForm
export const ${this.formData.fMachineid}DeleteForm = (res) => {
    return reqNull("post", url + "${this.formData.fStationname.label}/${this.formData.fMachineid}/DeleteForm", res)
}
//保存接口  SaveForm
export const ${this.formData.fMachineid}SaveForm = (res) => {
    return reqNull("post", url + "${this.formData.fStationname.label}/${this.formData.fMachineid}/SaveForm", res)
}
// 提交接口
export const ${this.formData.fMachineid}isSubmit = (res) => {
    return reqNull("post", url + "${this.formData.fStationname.label}/${this.formData.fMachineid}/isSubmit", res)
}
                    `
                    this.publicFormcode = `// 路径：components/public/el-form.vue
<template>
    <div class="mouldForm">
        <el-form :model="formData" class="demo-ruleForm" ref="ruleForm" label-position="left" :label-width="lableWidth">
            <el-col v-for=" (formobj, index) in formObj" v-show="!formobj.notShow" :key="index"
                :span="formobj.width ? formobj.width : 24">
                <el-form-item v-if="formobj.label" :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules">
                    <el-input v-if="formobj.input" v-model="formData[formobj.prop]" size="small"
                        :disabled="formobj.disabled" :placeholder="formobj.placeholder"
                        @input="inputINPUT($event, index, formobj.prop)"
                        @change="inputChange($event, index, formobj.prop)" />
                    <!-- textarea输入框 -->
                    <el-input v-if="formobj.textarea" v-model="formData[formobj.prop]" size="small" type="textarea"
                        :rows="formObj.rows" :disabled="formobj.disabled" :placeholder="formobj.placeholder" />
                    <!-- select选择器 -->
                    <el-select v-if="formobj.select" v-model="formData[formobj.prop]" size="small"
                        :disabled="formobj.disabled" :placeholder="formobj.placeholder"
                        @change="selectChange($event, index, formobj.prop)">
                        <el-option v-for="(options, sIndex) in formobj.options" :key="sIndex" :label="options.label"
                            :value="options" />
                    </el-select>
                    <el-select v-if="formobj.selects" v-model="formData[formobj.prop]" size="small"
                        :disabled="formobj.disabled" :placeholder="formobj.placeholder"
                        @change="selectChange($event, index, formobj.prop)">
                        <el-option v-for="(options, sIndex) in formobj.options" :key="sIndex" :label="options.label"
                            :value="options.label" />
                    </el-select>
                    <!-- select搜索框 -->
                    <el-select v-if="formobj.searchSelect" v-model="formData[formobj.prop]" size="small"
                        :disabled="formobj.disabled" filterable remote reserve-keyword
                        :placeholder="formobj.placeholder"
                        :remote-method="(query) => remoteMethod(query, index, formobj.prop)"
                        :loading="searchSelectLoading" @change="selectChange($event, index, formobj.prop)">
                        <el-option v-for="(item, ssIndex) in formobj.options" :key="ssIndex" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <!-- 年月日时分秒选择器 -->
                    <el-date-picker v-if="formobj.dateTime" v-model="formData[formobj.prop]"
                        value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" :disabled="formobj.disabled"
                        :placeholder="formobj.placeholder" />
                    <!-- 年月日时分秒，开始和结束时间 -->
                    <el-date-picker v-if="formobj.dateTimeRange" v-model="formData[formobj.prop]"
                        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="small"
                        type="datetimerange" :disabled="formobj.disabled" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                    <!-- 时分秒选择器 -->
                    <el-time-picker v-if="formobj.timePicker" v-model="formData[formobj.prop]" value-format="HH:mm:ss"
                        format="HH:mm:ss" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder"
                        :picker-options="formobj.options" />
                    <!-- 时分秒选择器，开始和结束时间 -->
                    <el-time-picker v-if="formobj.timePickerIsRange" v-model="formData[formobj.prop]"
                        value-format="HH:mm:ss" format="HH:mm:ss" is-range size="small" :disabled="formobj.disabled"
                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" />
                    <!-- 年月日选择器 -->
                    <el-date-picker v-if="formobj.datePicker" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd"
                        size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" />
                    <!-- 年月日选择器，开始和介绍年月日 -->
                    <el-date-picker v-if="formobj.datePickerIsRange" v-model="formData[formobj.prop]"
                        value-format="yyyy-MM-dd" type="daterange" size="small" :disabled="formobj.disabled"
                        :placeholder="formobj.placeholder" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                    <!-- switch开关 -->
                    <el-switch v-if="formobj.switch" v-model="formData[formobj.prop]" size="small"
                        :disabled="formobj.disabled" @change="formSwitchChange($event, index, formobj.prop)" />
                    <!-- radio单选框 -->
                    <el-radio-group @input="changeRadio" v-if="formobj.radio" v-model="formData[formobj.prop]"
                        :disabled="formobj.disabled">
                        <!-- <el-radio v-for="(options, rIndex) in formobj.options" :key="rIndex" :label="options.label"
                            :value="options.value" /> -->
                        <el-radio v-for="(options, rIndex) in formobj.options" :key="rIndex" :label="options.value">{{
                            options.label
                        }}</el-radio>
                    </el-radio-group>
                    <!-- checkbox复选框 -->
                    <el-checkbox-group v-if="formobj.checkbox" v-model="formData[formobj.prop]"
                        :disabled="formobj.disabled">
                        <el-checkbox v-for="options in formobj.options" :key="options.value" :label="options.label" />
                    </el-checkbox-group>
                    <!-- 文件上传 -->
                    <!-- 如果对象有值就回显，没有值就为空 -->
                    <!-- 按钮 -->
                    <el-button v-if="formobj.button" size="small" :disabled="formobj.disabled"
                        :loading="formobj.loading" :type="formobj.buttonType || 'primary'"
                        @click="buttonClick(formobj.prop, index)">
                        {{ formobj.placeholder }}
                    </el-button>
                    <!-- text展示 -->
                    <span v-if="formobj.text" v-text="formData[formobj.prop]" />
                    <!-- 计量单位 -->
                    <span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span>
                    <div v-if="formobj.upload" style="display:flex;width:98.2%">
                        <el-input v-if="false" autocomplete="off">
                        </el-input>
                        <div class="pdfcss">
                            <div v-for="(v, i) in fileLists" :key="i" style="margin: 2px 3px; height: 87%"
                                @click="openPdfs(v)">
                                <img style="max-width: 100%; max-height: 100%" src="@/assets/img/pdf.png" />
                            </div>
                        </div>
                        <el-button type="primary" v-if="formobj.uploadSelect" icon="el-icon-search" size="small"
                            @click="clickUpload" style="margin: 8px 0 2px 3px">操作</el-button>
                        <uploads :dialogUpload="dialogUpload" @closes="closeDialog" fileType="1" :folderid="timestamp"
                            @upFileList="getFile" :fileArray="fileLists" @delteFile="delteFile">
                        </uploads>
                        <pdfDialog :dialogVisible="dialogVisibles" @closes="closeDialog" :fileDetail="fileDetail">
                        </pdfDialog>
                    </div>
                </el-form-item>
                <div v-if="formobj.labels">
                    <img style="vertical-align: middle;" src="@/assets/img/Supervision/com_flg.png" alt="">
                    <span style="margin-left: 8px;">{{ formobj.labels }}</span>
                </div>
            </el-col>
        </el-form>
    </div>
</template>
ng封装,date:20210429,详细使用见根目录@/views/home/testForm/testForm.vue,———————————————————————————————————————————————————————————————————————————————— -->
<>
import uploads from "@/components/public/el-upload.vue"
import pdfDialog from '@/components/public/pdf-dialog';
import {
    upload,
} from "@/api/request.js";

// import aMap from '@/map/aMap.vue'
// import quillEditor from '@/components/quillEditor/quillEditor.vue'
export default {
    components: {
        // quillEditor
        uploads,
        pdfDialog
    },
    props: {
        formObj: {
            type: Array,
            required: true
        },
        lableWidth: {
            type: String,
            default: '120px'
        },
        formData: {
            type: Object,
            required: true
        },
        searchSelectOptionsCb: {
            type: Array,
        },
        timestamp: {
            type: String,
        },
        fileList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        // let uploadFileUrl = this.$store.state.user.uploadFileUrl;
        return {
            activeName: '1',
            // uploadUrl: uploadFileUrl,
            dialogImageUrl: '',
            searchSelectLoading: false,
            dialogVisible: false,
            disabled: false,
            searchShow: '', //高德地图input收索联想
            setSearchVal: [], //高德地图赋值搜索内容
            userInfo: {},
            enclosureImg: {},
            fSourcefileList: [],
            dialogUpload: false,
            dialogUpload1: false,
            dialog: false, //弹出框
            fileLists: [],
            dialogVisibles: false,
            fileDetail: null,
        };
    },
    created() {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));

    },
    watch: {
        'formData.fWarninglevel': {
            handler(newVal) {
                if (newVal == 0) {
                    this.formData.fWarninglevel = '正常'
                } else if (newVal == 1) {
                    this.formData.fWarninglevel = '初级'
                } else if (newVal == 2) {
                    this.formData.fWarninglevel = '中级'
                } else if (newVal == 3) {
                    this.formData.fWarninglevel = '高级'
                }
            },
            immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        },
        fileList: {
            handler(newVal) {
                if (newVal) {
                    this.fileLists = this.fileList;
                    // console.log(this.dialogPdf);
                }
            },
            immediate: true
        },

    },
    methods: {
        collapseChange(val) {
            console.log(val);
        },
        // 照片文件
        closeDialog() {
            this.dialogUpload = false
        },
        getFile(val) {
            this.fileLists = val
            console.log(val);
        },
        clickUpload() {
            this.dialogUpload = true
        },
        clickUpload1() {
            this.dialogUpload1 = true
        },
        openPdfs(v) {
            this.dialogVisibles = true;
            this.fileDetail = v

        },
        // 文件删除
        delteFile(file) {
            this.$emit('delteFile', file)
        },
        // 照片文件

        //select变化调用
        selectChange(value, index, prop) {
            this.$emit('selectChange', value, index, prop);
        },
        // input的input事件
        inputINPUT(value, index, prop) {
            this.$emit('inputINPUT', value, index, prop);
        },
        // input的change事件
        inputChange(value, index, prop) {
            this.$emit('inputChange', value, index, prop);
        },
        // 搜索类型select搜索
        remoteMethod(query, index, prop) {
            if (query) {
                this.searchSelectLoading = true;
                this.$emit('querySelectValue', query, index, prop);
                setTimeout(() => {
                    this.formObj[index].options = this.searchSelectOptionsCb;
                    this.searchSelectLoading = false;
                }, 500)
            } else {
                this.searchSelectOptios = [];
            }
        },
        //switch变化
        formSwitchChange(val, index, prop) {
            this.$emit("formSwitchChange", val, index, prop);
        },
        //按钮点击事件
        buttonClick(prop, index) {
            this.$emit("buttonClick", prop, index);
        },
        changeRadio(val) {
            // console.log(val);
            this.$emit("changeRadio", val);
        },
        // 上传照片
        handleChange(res) {
            // fHandlefile
            this.enclosureImg = new FormData(); //new一个formData事件
            this.enclosureImg.append("file", res.raw); //将file属性添加到formData里
            this.enclosureImg.append("folderid", this.timestamp); //将file属性添加到formData里
            this.enclosureImg.append("userId", this.userInfo.userId); //将file属性添加到formData里
            this.enclosureImg.append("userName", this.userInfo.realName); //将file属性添加到formData里

            upload(this.enclosureImg).then((i) => {
                i[0]['name'] = res.name
                i[0]['url'] = res.url

                this.fSourcefileList.push(i[0])
            });
            console.log(this.fSourcefileList);
        },
        //文件上传成功回调
        uploadSuccess(response, file, fileList, limit, prop, index) {
            console.log(12);
            console.log(response, file, fileList, limit, prop, index);
            this.formObj[index].uploadObj.hideUpload = fileList.length == limit;//文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
            this.pushUpload(file, fileList, limit, prop);
        },
        //文件删除
        handleRemove(file, fileList, limit, prop, index) {
            this.formObj[index].uploadObj.hideUpload = fileList.length == limit;//文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
            this.pushUpload(file, fileList, limit, prop);
        },
        // 文件预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        //提交时验证表单，直接在父级调用
        submitForm() {
            let formValidate = Boolean;
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    formValidate = true;
                } else {
                    this.$message.warning("请把信息填写完整！");
                    formValidate = false;
                }
            });
            return formValidate;
        },
        /* 清空表单
            逻辑：
            1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
            2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
         */
        resetForm(uploadArr) {
            this.$refs.ruleForm.resetFields();
            if (uploadArr) {
                for (let i = 0; i < uploadArr.length; i++) {
                    this.$refs[uploadArr[i]][0].clearFiles();
                    let index = this.formObj.findIndex(item => item.prop == uploadArr[i]);
                    this.formObj[index].uploadObj.hideUpload = false;
                }
            }
        },
        // 单个字段验证
        validateFieldProp(prop) {
            let formValidate = Boolean;
            this.$refs.ruleForm.validateField(prop, valid => {
                if (!valid) {
                    formValidate = true;
                } else {
                    formValidate = false;
                }
            });
            return formValidate;
        },
        // 对文件上传，删除进行赋值，调用form验证
        pushUpload(file, fileList, limit, prop) {
            console.log(file, fileList, limit, prop);
            if (fileList.length > 0) {
                this.formData[prop] = fileList;
            } else {
                // 表示没有数据,把字段置空
                this.formData[prop] = "";
            }
            this.$refs.ruleForm.validateField(prop);//调用验证form表单的文件上传
        },
        //子组件返回地图搜索值
        cbSearch(val, prop) {
            this.setSearchVal = val.tips; //子组件
            this.searchShow = prop; //显示input输入联想
        },
        //选中地图值
        selectVal(val, prop, index) {
        },

    }
}
<//script>
 
<style lang="less" scoped>
@width: 220px;

form {
    overflow: hidden;

}

/deep/.el-input {
    width: @width;
}

/deep/.el-select {
    width: @width;
}

/deep/.el-date-editor.el-input {
    width: @width;
}

/deep/.el-date-editor .el-range-separator {
    width: 20px !important;
}

/deep/.el-range-editor--small.el-input__inner {
    width: 400px;
}

.el-textarea {
    width: 400px;
}

.hide {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}

.amap_div {
    overflow: hidden;
    height: 400px;
    width: 600px;
    position: relative;

    .sreach_ul {
        position: absolute;
        top: 1;
        background-color: white;
        z-index: 9;
        min-width: 210px;
        float: auto;
        height: 200px;
        overflow: auto;
        padding: 0 20px;
        line-height: 24px;
    }
}

.mouldForm {
    height: 100%;
}
.pdfcss{
    height: 25px;
    line-height: 25px;
    width: 100%;
    display: flex;
    border: 1px solid #d1d7e2;
    border-radius: 5px;
    margin: 8px 0 2px 0;
}
</style>
`
                    this.tablecode = `<template>
    <div class="app-container">
        <el-table :data="dataList" default-expand-all v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.2)" border fit :highlight-current-row="currentRow"
            style="width: 100%;" height="100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :row-key="rowKey" @selection-change="handleSelectionChange" :stripe="stripe" @sort-change="handleSortChange"
            :cell-class-name="classCell" @row-click="rowChange" :row-class-name="tableRowClassName">
            <!-- 是否有多选 -->
            <el-table-column type="selection" width="55" v-if="table_config.isCheckBox"></el-table-column>
            <!-- 是否需要序号 -->
            <el-table-column type="index" :index="hIndex" label="序号" width="55" align="center"
                v-if="table_config.isIndex" />

            <el-table-column v-for="item in table_config.thead" :key="item.prop" :prop="item.prop" :label="item.label"
                :min-width="item.minWidth" :sortable="item.sortable ? true : false" :align="item.align">
                <template slot-scope="scope">
                    <!-- 有状态过滤 -->
                    <span v-if="(item.filter && !item.btn)" :class="item.specialClass && item.specialClass(scope.row)">
                        {{ item.callback && item.callback(scope.row) }}
                    </span>
                    <el-button size="mini" v-else-if="(item.filter && item.btn)"
                        :type="item.specialClass && item.specialClass(scope.row)"
                        :class="item.specialClass && item.specialClass(scope.row)">{{
                            item.callback && item.callback(scope.row)
                        }}</el-button>
                    <el-input v-else-if="item.edit" v-model="scope.row[item.prop]" :type="item.type" placeholder="请输入"
                        @input="input(scope.row, dataList, item.type, item.prop, scope.row[item.prop])"
                        :disabled="item.disabled" min="0"></el-input>
                    <!-- <div v-else-if="item.option"></div> -->
                    <el-select class="selectOptions"
                        @change="input(scope.row, dataList, item.type, item.prop, scope.row[item.prop])"
                        v-else-if="item.option" v-model="scope.row[item.prop]" placeholder="请选择">
                        <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value">
                        </el-option>
                    </el-select>
                    <!-- 图片展示 -->
                    <div v-else-if="item.image" >
                        <div v-for="(v, index) in scope.row[item.prop]" v-viewer :key="index" >
                            <img class="imgcss" :src="v[table_config.imgKeyWord]" />
                        </div>
                    </div>
                    <!-- 文件 -->
                    <div v-else-if="item.file" class='pdfcssg'>
                        <div v-for="(v, index) in scope.row[item.prop]" @click="openPdfs(v)" :key="index"  class="pdfDiv">
                            <img  class="imgdiv" src="@/assets/img/pdf.png" />
                        </div>
                    </div>
                    <!-- <img v-else-if="item.image" :src="scope.row[item.prop]" style="width:40px; height: 40px"> -->
                    <!-- switch开关 -->
                    <el-switch v-else-if="item.switch" v-model="scope.row[item.prop]" active-text="启用" active-value=1
                        inactive-value=0 inactive-text="停用" @change="item.callback && item.callback(scope.row)">
                    </el-switch>
                    <!-- detail -->
                    <el-button v-else-if="item.detail" @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                        type="text" size="small" style="padding: 0 !important; margin: 0">
                        {{ scope.row[item.prop] }}
                    </el-button>
                    <!-- 有跳转 -->
                    <router-link v-else-if="item.router"
                        :to="{ path: item.routerPath, query: { name: scope.row[item.prop] } }">
                        {{ scope.row[item.prop] }}
                    </router-link>
                    <!-- 默认展示 -->
                    <span v-else>
                        <span v-if="level.length > 1">
                            <a href="#" style="width:80px" :title="'预警标准：' + scope.row[item.prop]">{{
                                scope.row[item.prop]
                            }}</a>
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </span>
                </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column fixed="right" :label="table_config.operation.label" :width="table_config.operation.width"
                align="center" v-if="isShow">
                <template slot-scope="scope">
                    <template v-if="(table_config.operation.cols && !table_config.operation.detail)">
                        <div class="btn" v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">
                            <el-button @click="item.handleRow(scope.row, item.label)" :type="item.type" size="small">
                                {{ item.label }}
                            </el-button>
                        </div>
                    </template>
                    <template v-if="(table_config.operation.cols && table_config.operation.detail)">

                        <div @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                            style="color:#409eff !important;cursor:pointer"
                            v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">{{ item.label }}
                        </div>
                    </template>
                    <template
                        v-if="(table_config.operation.cols && table_config.operation.detail && table_config.operation.prop)">
                        <div @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                            style="color:#409eff !important;cursor:pointer"
                            v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">{{
                                scope.row[item.prop]
                            }}
                        </div>
                    </template>
                    <!-- 操作列超过3个，用更多下拉显示 -->
                    <el-dropdown v-if="isShowOperationCols">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in table_config.operation.cols.slice(2)" :key="item.label"
                                @click.native="item.handleRow(scope.row, item.label)">
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 附件展示 -->
        <div class="Control-2">
            <el-dialog top="4vh" :title="fFileName" :visible.sync="dialogPdf">
                <div :style="{ height: '800px' }" style="border:1px solid red">
                    <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </el-dialog>
        </div>
        <pdfDialog :dialogVisible="dialogVisibles" @closes="closeDialog" :fileDetail="fileDetail"></pdfDialog>
    </div>
</template>
<>
import pdfDialog from '@/components/public/pdf-dialog';

export default {
    props: {
        config: {
            type: Object,
            default: () => { }
        },
        rowKey: {
            type: String,
            default: 'fId'
        },
        currentRow: {
            type: Boolean,
            default: true,
        },
        stripe: {
            type: Boolean,
            default: true,
        },

        dataList: {
            type: Array,
            default: () => {
                return []
            }
        },
        page: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 20
        },
        loading: {
            type: Boolean,
            default: false
        },
        statusType: {
            type: String,
            default: "0"
        },
        level: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    components: {
        pdfDialog
    },
    data() {
        return {
            table_config: {
                imgKeyWord: "",
                fileKeyWord: "",
                fileName: "",
                classCell: false,
                dialogHeight: "800px",
                thead: [],            // 表格头
                isCheckBox: false,    // 是否多选
                isIndex: false,      // 是否有序号
                isOperation: true,   // 是否有操作列表
                operation: {        // 操作
                    cols: []
                },
            },
            // 附件名称
            fFileName: null,
            // 附件地址
            pdfUrl: null,
            // 附件展示
            dialogPdf: false,
            dialogVisibles: false,
            fileDetail: {},
        }
    },
    computed: {
        isShow() {
            return this.table_config.isOperation && this.table_config.operation.cols.length
        },
        isShowOperationCols() {
            let list = this.table_config.operation.cols
            return list.length && list.length > 2
        },
        hIndex() {
            // 当前页数 - 1 * 每页数据条数 + 1
            return (this.page - 1) * this.pageSize + 1
        }
    },
    watch: {
        // dialogHeight
        // 监听传过来的config，进行初始化
        config: {
            handler(newVal) {
                // console.log(newVal);
                if (newVal) {
                    this.initConfig()
                }
            },
            immediate: true
        }
    },
    mounted() {},
    methods: {
        // 关闭二级弹框
        closeDialog() {
            this.dialogVisibles = false;
        },
        // 初始化配置
        initConfig() {
            for (let key in this.config) {
                if (Object.keys(this.table_config).includes(key)) {
                    this.table_config[key] = this.config[key]
                }
            }
        },
        // 多选事件
        handleSelectionChange(val) {
            console.log(val);
            this.$emit('selection-change', val)
        },
        // 点击当前行
        rowChange(val) {
            this.$emit('click-change', val)
        },
        classCell({ rowIndex, columnIndex }) {
            if (this.statusType == "1") {
                if (this.table_config.classCell) {
                    // this.$emit('classCell', row, column, rowIndex, columnIndex)
                    if (rowIndex == 0 && columnIndex == 0) {
                        return 'blueClass';
                    } else if (rowIndex == 1 && columnIndex == 0) {
                        return 'orangeClass';
                    } else if (rowIndex == 2 && columnIndex == 0) {
                        return 'redClass';
                    }
                }
            } else if (this.statusType == "2") {
                if (rowIndex == 2 && columnIndex != 0) {
                    if (this.level[columnIndex] == 1) {
                        return 'blueClass1';
                        // return 'blueClass';
                    } else if (this.level[columnIndex] == 2) {
                        return 'orangeClass1';
                    } else if (this.level[columnIndex] == 3) {
                        return 'redClass1';
                    } else {
                        return 'defaltClass1';
                    }
                }
                // console.log(45);
            }
        },
        tableRowClassName() {
            // if (rowIndex === 2) {
            //     return 'warning-row';
            // }
            // return '';
        },
        // 排序事件
        handleSortChange(val) {
            this.$emit('sort-change', val)
        },
        openDialog(row) {
            // this.$emit('openDialog', row)
        },
        // 文件预览
        openPdfs(val) {
            this.dialogVisibles = true
            this.fileDetail = val
        },
        // input 输入值
        input(row, table, type, lable) {
            console.log(row, table, type, lable);
            this.$emit('inputValue', row, table)
        }
    }
}
<//script>
<style scoped>
.btn {
    display: flex;
    justify-content: center;
    display: inline-block;
    margin: 5px 0 0 10px;
}

.bt .btn {
    display: flex;
    justify-content: center;
    display: inline-block;
    margin: 5px 0 0 10px;
}

.btn:first-child {
    margin-left: 0;
}

.color0 {
    color: #22b14c !important;
}

.color1 {
    color: #5353ef;
}

.color2 {
    color: #cdcf0b;
}

.color3 {
    color: #fdb556;
}

.el-dropdown {
    margin-left: 10px;
    cursor: pointer;
}

.app-container {
    height: 100%;
}
.imgcss {
    max-width: 100%;
    max-height: 100%;
    width: 18px;
    height: 20px;
}
.pdfcssg {
   display: flex;
   height: 100%;
   align-items: center;
   flex-shrink: 0;
}
.pdfDiv {
   margin: 2px 3px;
   display: flex;
   flex-shrink: 0;
   align-items: center;
}
.imgdiv {
   max-width: 100%;
   max-height: 100%;
   width: 18px;
   height: 20px;
}
</style>`
                }
            }
            console.log(this.active);



        },
        prev() {
            if (this.active == 1) {
                this.active--
                this.prevStr = true
                this.nextStr = false
            } else if (this.active == 2) {
                this.active--
                this.prevStr = false
                this.nextStr = false

            }
        },
        rowChange(row) {
            console.log(row);
            this.tableName = row.tableName
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        highlighter(code) {
            return highlight(code, languages.js)
        }
    }

}
</script>
<style scoped lang="less">
.codeGenerator {
    width: 100%;
    height: 100%;

    .codeGeneratorBox {
        width: 215px;
        height: 250px;
        // border: 1px solid red;
        padding: 9px;
        margin: 20px;
        position: relative;
        border: 1px solid #ccc;

        .lr-cover-img {
            height: 140px;
            background-color: #efefef;
            width: 100%;
            text-align: center;
            padding-top: 40px;
            margin-bottom: 10px;
            color: #393939;

            img {
                width: 60px;
                height: 60px;
                position: absolute;
                left: 20px;
                border-radius: 2px;
            }

            h4 {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                padding-left: 45px;

                font-weight: 400;
            }
        }

        .lr-cover-info {
            position: relative;
            padding: 6px 0 0 15px;
            width: 100%;

            font-size: 12px;
            color: #838383;
            padding-bottom: 10px;
            height: 0px;
            line-height: 5px;
            // border: 1px solid red;
            overflow: hidden;
        }

        .lr-cover-button {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            border-radius: 0 0 5px 5px;
            box-shadow: 0 1px 0 0 #fff inset;
            padding: 4px 5px;
            box-sizing: border-box;
            text-align: right;
            font-size: 12px;
            // border: 1px solid red;

            .btn {
                font-size: 12px;
                width: 48px;
                height: 24px;
                line-height: 24px;
                margin-top: 2px;
                margin-right: 4px;
                padding: 0;
                position: absolute;
                right: 5px;
                text-align: center;
                border-radius: 2px;
                color: #787878;
                background-color: #fff;
                border: 1px solid #c3c3c3;
            }
        }
    }
}

.lr-cover-img .lr-cover-img2 {
    display: none;
}

.codeGeneratorBox:hover {
    // background: -webkit-linear-gradient(left, rgba(36, 142, 217, 0.8), #3286ed)
    border: 1px solid #3286ed;
}

.codeGeneratorBox:hover .lr-cover-img {
    background: -webkit-linear-gradient(left, rgba(36, 142, 217, 0.8), #3286ed);
    color: #fff;
}

.codeGeneratorBox:hover .lr-cover-img1 {
    display: none;
}

.codeGeneratorBox:hover .lr-cover-img2 {
    display: block;
}

.codeGeneratorBox:hover .lr-cover-info {
    color: #3286ed;
}

.codeGeneratorBox:hover .lr-cover-button .btn {
    background: -webkit-linear-gradient(left, rgba(36, 142, 217, 0.8), #3286ed);
    color: #fff;
    border: 1px solid #3286ed;
}

.dataBoxActive {
    margin-top: 50px;
    height: 450px;
    // border: 1px solid red;
}

/* required class */
.my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
    outline: none;
}

/* not required: */
.height-300 {
    height: 385px;
}
</style>
